<template>
  <div class="job-report-container">
    <div class="job-report-content">
      <!-- 搜索条件 -->
      <el-form 
        ref="searchFormRef"
        :model="searchForm" 
        class="search-form"
        inline
        size="small"
      >
        <el-form-item>
          <el-input 
            v-model="searchForm.jobName" 
            placeholder="请输入职位名称"
            clearable
            style="width: 160px"
          />
        </el-form-item>
        
        <el-form-item>
          <el-input 
            v-model="searchForm.companyName" 
            placeholder="请输入企业名称"
            clearable
            style="width: 160px"
          />
        </el-form-item>
        
        <el-form-item>
          <el-select 
            v-model="searchForm.status" 
            placeholder="选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="待处理" :value="0" />
            <el-option label="已处理" :value="1" />
            <el-option label="忽略" :value="2" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-date-picker
            v-model="searchForm.startTime"
            type="date"
            placeholder="开始日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 140px;margin-bottom: 16px;"
          />
        </el-form-item>
        
        <el-form-item>
          <el-date-picker
            v-model="searchForm.endTime"
            type="date"
            placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 140px;margin-bottom: 16px;    "
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading" size="small">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset" size="small">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- 数据列表 -->
      <div class="table-header">
        <h3>职位举报列表</h3>
        <div class="table-actions">
          <el-button type="primary" text @click="refreshData" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
      
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 100%"
          max-height="500"
          size="small"
        >
          <el-table-column prop="jobName" label="职位名称" show-overflow-tooltip />
          
          <el-table-column prop="companyName" label="企业名称" show-overflow-tooltip />
          
          <el-table-column prop="reportReason" label="举报原因" show-overflow-tooltip />
          
          <el-table-column label="举报人" align="center">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                link 
                size="small" 
                @click="handleViewReporter(row)"
              >
                查看举报人
              </el-button>
            </template>
          </el-table-column>
          
          <el-table-column label="招聘者" align="center">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                link 
                size="small" 
                @click="handleViewHr(row)"
              >
                查看招聘者
              </el-button>
            </template>
          </el-table-column>
          
          <el-table-column label="职位详情" align="center">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                link 
                size="small" 
                @click="handleViewJobDetail(row)"
              >
                查看职位
              </el-button>
            </template>
          </el-table-column>
          
          <el-table-column prop="status" label="处理状态" align="center">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)" size="small">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="createdTime" label="举报时间" align="center">
            <template #default="{ row }">
              {{ formatDateTime(row.createdTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" fixed="right" align="center">
            <template #default="{ row }">
              <el-button 
                v-if="row.status === 0" 
                type="primary" 
                size="small" 
                @click="handleProcess(row)"
              >
                <el-icon><Edit /></el-icon>
                处理
              </el-button>
              <el-button 
                v-else
                type="info" 
                size="small" 
                disabled
              >
                <el-icon><Edit /></el-icon>
                已处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="searchForm.pageNo"
            v-model:page-size="searchForm.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    
    <!-- 处理举报侧边栏 -->
    <el-drawer
      v-model="dialogVisible"
      :title="dialogTitle"
      direction="rtl"
      size="480px"
      :close-on-click-modal="false"
    >
      <div v-if="currentReport" class="report-detail">
        <!-- 基本信息 -->
        <div class="info-section">
          <div class="info-item">
            <span class="label">举报ID：</span>
            <span class="value">{{ currentReport.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">职位ID：</span>
            <span class="value">{{ currentReport.jobId }}</span>
          </div>
          <div class="info-item">
            <span class="label">职位名称：</span>
            <span class="value">{{ currentReport.jobName }}</span>
          </div>
          <div class="info-item">
            <span class="label">招聘者ID：</span>
            <span class="value">{{ currentReport.hrId }}</span>
          </div>
          <div class="info-item">
            <span class="label">企业名称：</span>
            <span class="value">{{ currentReport.companyName }}</span>
          </div>
          <div class="info-item">
            <span class="label">举报用户ID：</span>
            <span class="value">{{ currentReport.reportUserId }}</span>
          </div>
          <div class="info-item">
            <span class="label">举报用户手机号：</span>
            <span class="value">{{ currentReport.reportUserPhone || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">处理状态：</span>
            <span class="value">
              <el-tag :type="getStatusType(currentReport.status)" size="small">
                {{ getStatusText(currentReport.status) }}
              </el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ formatDateTime(currentReport.createdTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">更新时间：</span>
            <span class="value">{{ formatDateTime(currentReport.updatedTime) }}</span>
          </div>
        </div>
        
        <!-- 举报原因 -->
        <div class="reason-section">
          <div class="section-title">举报原因</div>
          <div class="report-reason">
            {{ currentReport.reportReason }}
          </div>
        </div>
        
        <!-- 举报证明材料 -->
        <div v-if="currentReport.reportProves && currentReport.reportProves.length > 0" class="proves-section">
          <div class="section-title">举报证明材料</div>
          <div class="proves-container">
            <el-image
              v-for="(prove, index) in currentReport.reportProves"
              :key="index"
              :src="prove"
              :preview-src-list="currentReport.reportProves"
              :initial-index="index"
              fit="cover"
              class="prove-image"
              lazy
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                  <span>加载失败</span>
                </div>
              </template>
            </el-image>
          </div>
        </div>
        
        <!-- 处理表单 -->
        <div v-if="currentReport.status === 0" class="process-section">
          <div class="section-title">处理操作</div>
          <div class="process-form">
            <div class="form-item">
              <div class="form-label">处理方式</div>
              <el-radio-group v-model="processForm.actionType" size="small">
                <el-radio value="agree">同意举报</el-radio>
                <el-radio value="ignore">忽略举报</el-radio>
              </el-radio-group>
            </div>
            <div class="form-item">
              <div class="form-label">处理原因 <span class="required">*</span></div>
              <el-input
                v-model="processForm.reportReason"
                type="textarea"
                :rows="3"
                placeholder="请输入处理原因（必填）..."
                maxlength="500"
                show-word-limit
                size="small"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div v-if="currentReport" class="drawer-footer">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
        <el-button 
          v-if="currentReport.status === 0" 
          type="primary" 
          @click="submitProcess"
          :disabled="!processForm.actionType || !processForm.reportReason.trim()"
          size="small"
        >
          确定处理
        </el-button>
      </div>
    </el-drawer>

    <!-- 举报人详情弹窗 -->
    <el-dialog
      v-model="userDialogVisible"
      title="举报人信息"
      width="520px"
      :close-on-click-modal="false"
    >
      <div v-loading="userDetailLoading">
        <el-descriptions :column="2" border v-if="userDetail">
          <el-descriptions-item label="用户ID">{{ userDetail.id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userDetail.phone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="昵称">{{ userDetail.nickName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ userDetail.realName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="头像" :span="2">
            <el-avatar :size="64" :src="userDetail.face" v-if="userDetail.face" />
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="邮箱" :span="2">{{ userDetail.email || '-' }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ calculateAge(userDetail.birthday) }}</el-descriptions-item>
          <el-descriptions-item label="身份角色">{{ formatRole(userDetail.role) }}</el-descriptions-item>
          <el-descriptions-item label="注册时间" :span="2">{{ formatDateTime(userDetail.createdTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 职位详情弹窗 -->
    <el-dialog
      v-model="jobDialogVisible"
      title="职位详情"
      width="700px"
      :close-on-click-modal="false"
    >
      <div v-loading="jobDetailLoading">
        <div v-if="jobDetail" class="job-detail">
          <!-- 基本信息 -->
          <el-descriptions :column="2" border>
            <el-descriptions-item label="职位ID">{{ jobDetail.id || '-' }}</el-descriptions-item>
            <el-descriptions-item label="HR ID">{{ jobDetail.hrId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="职位名称">{{ jobDetail.jobName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="职位类别">{{ jobDetail.jobType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="工作经验">{{ jobDetail.expYears || '-' }}</el-descriptions-item>
            <el-descriptions-item label="学历要求">{{ jobDetail.edu || '-' }}</el-descriptions-item>
            <el-descriptions-item label="薪资待遇">
              {{ formatSalary(jobDetail.beginSalary, jobDetail.endSalary, jobDetail.monthlySalary) }}
            </el-descriptions-item>
            <el-descriptions-item label="招聘状态">
              <el-tag :type="getJobStatusType(jobDetail.status)" size="small">
                {{ formatJobStatus(jobDetail.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="工作城市">{{ jobDetail.city || '-' }}</el-descriptions-item>
            <el-descriptions-item label="工作地点">{{ jobDetail.address || '-' }}</el-descriptions-item>
            <el-descriptions-item label="职位标签" :span="2">
              <div v-if="jobDetail.tags" class="tags-container">
                <el-tag 
                  v-for="tag in getTagsList(jobDetail.tags)" 
                  :key="tag" 
                  size="small" 
                  type="info"
                  class="tag-item"
                >
                  {{ tag }}
                </el-tag>
              </div>
              <span v-else>-</span>
            </el-descriptions-item>
          </el-descriptions>
          
          <!-- 职位描述 -->
          <div v-if="jobDetail.jobDesc" class="job-desc-section">
            <el-divider content-position="left">职位描述</el-divider>
            <div class="job-desc-content">
              <div v-if="jobDetail.jobDescHtml" v-html="jobDetail.jobDescHtml"></div>
              <div v-else class="job-desc-text">{{ jobDetail.jobDesc }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="jobDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 招聘者详情弹窗 -->
    <el-dialog
      v-model="hrDialogVisible"
      title="招聘者信息"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-loading="hrDetailLoading">
        <el-descriptions :column="2" border v-if="hrDetail">
          <el-descriptions-item label="用户ID">{{ hrDetail.userId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ hrDetail.realName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="公司ID">{{ hrDetail.companyId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="公司名称">{{ hrDetail.companyName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ hrDetail.position || '-' }}</el-descriptions-item>
          <el-descriptions-item label="绑定类型">
            <el-tag :type="getBindTypeColor(hrDetail.bindType)" size="small">
              {{ formatBindType(hrDetail.bindType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="个性签名" :span="2">
            <div class="hr-signature">
              {{ hrDetail.hrSignature || '-' }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="个性标签" :span="2">
            <div v-if="hrDetail.hrTags" class="hr-tags-container">
              <el-tag 
                v-for="tag in getHrTagsList(hrDetail.hrTags)" 
                :key="tag" 
                size="small" 
                type="primary"
                class="hr-tag-item"
              >
                {{ tag }}
              </el-tag>
            </div>
            <span v-else>-</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="hrDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Edit, Picture } from '@element-plus/icons-vue'
import { getJobReportListApi, getJobReportDetailApi, agreeJobReportApi, ignoreJobReportApi, getJobDetailApi, getHrDetailApi } from '@/api/enterprise'
import { getUserDetailApi } from '@/api/user'

// 响应式数据
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const currentReport = ref(null)

// 处理表单数据
const processForm = reactive({
  actionType: '',
  reportReason: ''
})

// 举报人详情弹窗数据
const userDialogVisible = ref(false)
const userDetailLoading = ref(false)
const userDetail = ref(null)

// 职位详情弹窗数据
const jobDialogVisible = ref(false)
const jobDetailLoading = ref(false)
const jobDetail = ref(null)

// 招聘者详情弹窗数据
const hrDialogVisible = ref(false)
const hrDetailLoading = ref(false)
const hrDetail = ref(null)

// 搜索表单
const searchForm = reactive({
  jobName: '',
  companyName: '',
  status: null,
  startTime: '',
  endTime: '',
  pageNo: 1,
  pageSize: 10
})

// 表单引用
const searchFormRef = ref()

// 方法
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',   // 待处理 - 橙色
    1: 'success',   // 已处理 - 绿色
    2: 'info'       // 忽略 - 灰色
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    0: '待处理',
    1: '已处理',
    2: '忽略'
  }
  return statusMap[status] || '未知'
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const calculateAge = (birthday) => {
  if (!birthday) return '-'
  const b = new Date(birthday)
  if (isNaN(b.getTime())) return '-'
  const now = new Date()
  let age = now.getFullYear() - b.getFullYear()
  const m = now.getMonth() - b.getMonth()
  if (m < 0 || (m === 0 && now.getDate() < b.getDate())) age -= 1
  return age < 0 ? '-' : age
}

const formatRole = (role) => {
  const map = { 1: '求职者', 2: '求职者、招聘者' }
  return map[role] || '未知'
}

const formatJobStatus = (status) => {
  const map = { 1: '招聘中', 2: '已关闭', 3: '违规删除' }
  return map[status] || '未知'
}

const getJobStatusType = (status) => {
  const map = { 1: 'success', 2: 'info', 3: 'danger' }
  return map[status] || 'info'
}

const formatSalary = (beginSalary, endSalary, monthlySalary) => {
  if (!beginSalary && !endSalary) return '-'
  const begin = beginSalary || 0
  const end = endSalary || 0
  const monthly = monthlySalary || 12
  return `${begin}K-${end}K·${monthly}薪`
}

const getTagsList = (tags) => {
  if (!tags) return []
  return tags.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
}

const formatBindType = (bindType) => {
  const map = { 1: 'HR', 2: '管理员' }
  return map[bindType] || '未知'
}

const getBindTypeColor = (bindType) => {
  const map = { 1: 'primary', 2: 'success' }
  return map[bindType] || 'info'
}

const getHrTagsList = (tags) => {
  if (!tags) return []
  return tags.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
}

const handleSearch = async () => {
  searchForm.pageNo = 1
  await fetchData()
}

const handleReset = () => {
  searchFormRef.value?.resetFields()
  searchForm.jobName = ''
  searchForm.companyName = ''
  searchForm.status = null
  searchForm.startTime = ''
  searchForm.endTime = ''
  searchForm.pageNo = 1
  searchForm.pageSize = 10
  fetchData()
}

const handleSizeChange = (size) => {
  searchForm.pageSize = size
  searchForm.pageNo = 1
  fetchData()
}

const handleCurrentChange = (page) => {
  searchForm.pageNo = page
  fetchData()
}

const handleView = (row) => {
  currentReport.value = row
  dialogTitle.value = '举报详情'
  dialogVisible.value = true
}

const handleViewReporter = async (row) => {
  try {
    userDetailLoading.value = true
    userDetail.value = null
    const res = await getUserDetailApi(row.reportUserId)
    userDetail.value = res || {}
    userDialogVisible.value = true
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  } finally {
    userDetailLoading.value = false
  }
}

const handleViewJobDetail = async (row) => {
  try {
    jobDetailLoading.value = true
    jobDetail.value = null
    const res = await getJobDetailApi(row.jobId)
    jobDetail.value = res || {}
    jobDialogVisible.value = true
  } catch (error) {
    console.error('获取职位详情失败:', error)
    ElMessage.error('获取职位详情失败')
  } finally {
    jobDetailLoading.value = false
  }
}

const handleViewHr = async (row) => {
  try {
    hrDetailLoading.value = true
    hrDetail.value = null
    const res = await getHrDetailApi(row.hrId)
    console.log(res);
    
    hrDetail.value = res || {}
    hrDialogVisible.value = true
  } catch (error) {
    console.error('获取招聘者详情失败:', error)
    ElMessage.error('获取招聘者详情失败')
  } finally {
    hrDetailLoading.value = false
  }
}

const handleProcess = async (row) => {
  try {
    loading.value = true
    // 获取详细的举报信息
    const reportDetail = await getJobReportDetailApi(row.id)
    currentReport.value = reportDetail || row
    dialogTitle.value = '处理举报'
    // 重置处理表单
    processForm.actionType = ''
    processForm.reportReason = ''
    dialogVisible.value = true
  } catch (error) {
    console.error('获取举报详情失败:', error)
    ElMessage.error('获取举报详情失败')
  } finally {
    loading.value = false
  }
}

// 提交处理
const submitProcess = async () => {
  try {
    const requestData = {
      reportId: currentReport.value.id,
      reportReason: processForm.reportReason
    }
    
    if (processForm.actionType === 'agree') {
      await agreeJobReportApi(requestData)
      ElMessage.success('同意举报成功')
    } else if (processForm.actionType === 'ignore') {
      await ignoreJobReportApi(requestData)
      ElMessage.success('忽略举报成功')
    }
    
    dialogVisible.value = false
    fetchData()
  } catch (error) {
    console.error('处理失败:', error)
    ElMessage.error('处理失败')
  }
}

const refreshData = () => {
  fetchData()
}

const fetchData = async () => {
  try {
    loading.value = true
    
    // 过滤空值并处理时间格式
    const params = {}
    Object.keys(searchForm).forEach(key => {
      if (searchForm[key] !== '' && searchForm[key] !== null && searchForm[key] !== undefined) {
        // 处理时间格式
        if (key === 'startTime' && searchForm[key]) {
          params[key] = searchForm[key] + ' 00:00:00'
        } else if (key === 'endTime' && searchForm[key]) {
          params[key] = searchForm[key] + ' 23:59:59'
        } else {
          params[key] = searchForm[key]
        }
      }
    })
    
    const response = await getJobReportListApi(params)
    
    if (response && response.list) {
      tableData.value = response.list
      total.value = response.totals || 0
    } else {
      tableData.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取职位举报列表失败:', error)
    ElMessage.error('获取数据失败')
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.job-report-container {
  padding: 20px;
  background: #f5f6fa;
  min-height: 100vh;
}

.job-report-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  margin-bottom: 16px;
  padding: 16px;
  background: #fafbfc;
  border-radius: 6px;
  
  .el-form-item {
    margin-bottom: 8px;
    margin-right: 12px;
    
    &:last-child {
      margin-right: 0;
    }
  }
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  
  h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 500;
  }
}

.table-container {
  .el-table {
    border-radius: 6px;
    overflow: hidden;
  }
  
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}

// 侧边栏样式
.report-detail {
  padding: 16px;
  height: calc(100vh - 120px);
  overflow-y: auto;
  
  .info-section {
    margin-bottom: 20px;
    
    .info-item {
      display: flex;
      align-items: flex-start;
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .label {
        min-width: 120px;
        color: #666;
        font-size: 13px;
        font-weight: 500;
      }
      
      .value {
        flex: 1;
        color: #333;
        font-size: 13px;
        word-break: break-word;
      }
    }
  }
  
  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #409eff;
  }
  
  .reason-section {
    margin-bottom: 20px;
    
    .report-reason {
      background: #f8f9fa;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #e9ecef;
      line-height: 1.5;
      font-size: 13px;
      word-break: break-word;
      white-space: pre-wrap;
    }
  }
  
  .proves-section {
    margin-bottom: 20px;
    
    .proves-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 8px;
      
      .prove-image {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        border: 1px solid #e9ecef;
        cursor: pointer;
        
        .image-error {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          color: #909399;
          font-size: 10px;
          
          .el-icon {
            font-size: 18px;
            margin-bottom: 2px;
          }
        }
      }
    }
  }
  
  .process-section {
    margin-bottom: 20px;
    
    .process-form {
      .form-item {
        margin-bottom: 16px;
        
        .form-label {
          font-size: 13px;
          color: #666;
          margin-bottom: 8px;
          font-weight: 500;
          
          .required {
            color: #f56c6c;
          }
        }
      }
    }
  }
}

.drawer-footer {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 16px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}


.job-detail {
  .el-descriptions {
    margin-bottom: 20px;
  }
  
  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    
    .tag-item {
      margin: 0;
    }
  }
  
  .job-desc-section {
    margin-top: 20px;
    
    .el-divider {
      margin: 20px 0 16px 0;
    }
    
    .job-desc-content {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 16px;
      border: 1px solid #e9ecef;
      
      .job-desc-text {
        line-height: 1.6;
        color: #333;
        white-space: pre-wrap;
      }
      
      :deep(p) {
        margin-bottom: 12px;
        line-height: 1.6;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
      
      :deep(ul), :deep(ol) {
        margin-left: 20px;
        margin-bottom: 12px;
        
        li {
          line-height: 1.6;
          margin-bottom: 6px;
        }
      }
      
      :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
        margin: 16px 0 12px 0;
        font-weight: 600;
        
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}

// 招聘者详情弹窗样式
.hr-signature {
  line-height: 1.6;
  color: #333;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  word-break: break-word;
}

.hr-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  
  .hr-tag-item {
    margin: 0;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .job-report-container {
    padding: 10px;
  }
  
  .search-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 15px;
    }
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>
